<template>
    <div class="task">
        <div class="task_btn">
            <el-button @click="new_task">添加任务</el-button>
            <div class="search">
                <input type="text" v-model="search" @keyup.enter="onSearch" style="width:230px;margin-bottom:20px;">
                <el-select v-model="searchd.classd" filterable placeholder="请选择类别" @change="nowList()" class="searchclass" style="width:130px">
                    <el-option
                    v-for="(item,index) in classd"
                    :key="index"
                    :label="item.class_name"
                    :value="item.class_id">
                    </el-option>
                </el-select>
                <el-select v-model="searchd.listsea" filterable placeholder="请选择清单事项名称" class="searchclass" style="width:200px">
                    <el-option
                    v-for="(item,index) in listsea"
                    :key="index"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-model="searchd.deped" placeholder="请选择所属区域" class="searchclass" style="width:130px" @change="depedNow">
                    <el-option
                    v-for="(item,index) in dep"
                    :key="index"
                    :label="item.dept_name"
                    :value="item.dept_id">
                    </el-option>
                </el-select>
                <el-select v-model="searchd.team" placeholder="请选择部门" class="searchclass team" style="width:130px">
                    <el-option
                    v-for="(item,index) in team"
                    :key="index"
                    :label="item.realname"
                    :value="item.userid">
                    </el-option>
                </el-select>
                <button @click="onSearch">搜索</button>
            </div>
        </div>
        <el-table
        :data="tableData"
        border
        class="task_table"
        @selection-change="handleSelectionChange"
        style="width: 100%">
            <el-table-column
            fixed
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
            prop="add_time"
            label="创建时间"
            width="180">
                <template slot-scope="scope">
                <span>{{scope.row.add_time | formatDated}}</span>
                </template>
            </el-table-column>
            <el-table-column
            prop="explain"
            label="具体情形"
            width="250">
            <template slot-scope="scope">
                <span class="ncontent">{{scope.row.explain}}</span>
            </template>
            </el-table-column>
            <el-table-column
            prop="content"
            label="清单事项名称"
            width="250">
                <template slot-scope="scope">
                    <span @click="openDesc(scope.row)" class="ncontent">{{
                        scope.row.ncontent
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column
            prop="named"
            label="类别"
            width="250">
            </el-table-column>
            <!-- <el-table-column
            prop="name"
            label="计划日期"
            width="300">
                <template slot-scope="scope">
                <span>{{scope.row.stime | formatDated}} 至 {{scope.row.etime | formatDated}}</span>
                </template>
            </el-table-column> -->
            <el-table-column
            prop="einheit"
            label="协同治理单位"
            width="300">
            <template slot-scope="scope">
            <!-- <span v-for="(item,index) in scope.row.einheit" :key="index"> </span> -->
            <el-tag size="mini" v-for="(item,index) in scope.row.einheit" :key="index" >{{item}}</el-tag>
            </template>
            </el-table-column>
            
            <el-table-column
            prop="address"
            label="状态"
            width="">
                <template slot-scope="scope">
                <span>{{scope.row.state | stated}}</span>
                </template>
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small" style="color:#31bdce" @click="edit(scope.row)" v-if="noLook">编辑</el-button>
                <el-button type="text" size="small" style="color:#f56c6c" @click="deleted(scope.row)" v-if="noLook">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, prev, pager, next"
        style="text-align: right;margin-top:15px"
        :total="totals">
        </el-pagination>

        <!-- 查看详情 -->
        <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :before-close="drawerClose"
        class="drawer"
        :with-header="false">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" id="subOutputRank-print">
            <el-form-item label="创建时间:" prop="date">
                <p>{{details.add_time | formatDated}}</p>
            </el-form-item>
            <el-form-item label="具体情形:" prop="company">
                <p>{{details.explain}}</p>
            </el-form-item>
            <el-form-item label="类别:" prop="named" style="display:block;width:800px;">
                <p style="display:inline-block;width:750px;word-wrap:break-word;">{{details.named}}</p>
            </el-form-item>
            <el-form-item label="清单事项名称:" prop="type">
                <p>{{details.type}}</p>
            </el-form-item>
            <el-form-item label="任务评价:" prop="date" v-if="details.state == 2" class="rate">
                <el-rate
                v-model="details.appraise"
                class="score"
                disabled
                :texts="textScro"
                show-text
                text-color="#ff9900">
                </el-rate>
            </el-form-item>
            
            <el-form-item label="计划日期:" prop="date">
                <p>{{details.stime | formatDated}} 至 {{details.etime | formatDated}}</p>
            </el-form-item>
            <el-form-item label="协同治理单位:" prop="einheit">
                <el-tag v-for="(item,index) in details.einheits" :key="index" >{{item}}</el-tag>
            </el-form-item>
            <el-form-item label="联系电话:" prop="phone">
                <p>{{details.phone}}</p>
            </el-form-item>
            <el-form-item label="驳回说明:" prop="company" style="color:red;" v-if="bohui != ''">
                <p v-for="(item,index) in bohui" :key="index">{{item.p_content}}</p>
            </el-form-item>
            
            <!-- <el-form-item label="任务追加说明:" prop="company">
                <p v-for="(item,index) in detailed" :key="index">{{item}}</p>
            </el-form-item> -->
            <el-form-item label="上传图片:" class="uppic">
                <el-upload
                action="#"
                list-type="picture-card"
                :file-list="fileList"
                :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                    <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url" alt=""
                    >
                    <span class="el-upload-list__item-actions" >
                        <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                        >
                        <i class="el-icon-zoom-in"></i>
                        </span>
                    </span>
                    </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" :append-to-body="true" :modal-append-to-body="false">
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="上传视频:" class="uppic">
                <div class="wrap">
                    <video :src="videoDate" controls="controls"></video>
                </div>
            </el-form-item>
            <div class="messages" v-if="logsd != ''">
                <h3>任务追加说明</h3>
                <div class="mess_cn" v-for="(item,index) in logsd" :key="index" :style="item.type == '102' ? 'text-align: right;' : 'text-align: left;'">
                    <div :class="item.type == '102' ? 'messag mess_right' : 'messag'">
                        <div class="mess_left">
                            <img :src="item.icon == '' ? 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' : item.icon" alt="">
                            <p>{{item.add_realname}}</p>
                            
                        </div>
                        <div class="user_cn">
                            <span><span style="display:inline-block;"></span>{{item.p_content}}</span>
                            <img :src="item.pic" alt="" width="150" style="display:block;margin:10px 0;">
                            <span style="display:block;font-size:13px;color:#333;">{{item.add_time | formatDated}}</span>
                        </div>
                    </div>
                </div>
            </div>
            
        </el-form>

        <!-- 表单提交 -->
        <el-form :model="form" status-icon :rules="rule" ref="form" label-width="100px" class="demo-form" v-if="noSubmit">
            <el-form-item label="内容:" prop="reason" class="edit_container">
                <el-input type="textarea" v-model="form.reason"></el-input>
                <el-upload
                    ref="pictureUpload" 
                    action="http://gggl.phpgzs.top/api/project/upload"
                    list-type="picture-card"
                    :show-file-list="false"
                    class="avatar-uploader"
                    :on-success="handlePreview"
                    style="display:inline-block;margin-left:30px;vertical-align: middle;"
                    :on-remove="handleRemove"
                    :before-upload="beforeUpload"
                    :limit="1">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">任务说明</el-button>
                <el-button type="success" @click="complete('form')" v-if="details.state != 3 ">任务完成</el-button>
                <el-button type="success" @click="score = true" v-else>评价任务</el-button>
                <el-button @click="printContent(e)" style="float:right;">打印</el-button>
            </el-form-item>
        </el-form>
        </el-drawer>

        <!-- 评价 -->
        <el-dialog
        title="评分"
        :visible.sync="score"
        :close-on-click-modal="false"
        class="score_bg"
        width="30%">
        <p style="margin-bottom:15px;">请给此次任务评分 评分等级为（满意、基本满意、不满意）</p>
        <el-rate
        class="score"
        v-model="scoreVal"
        @change="nowscore"
        :texts="textScro"
        show-text>
        </el-rate>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="scoreClick">提交</el-button>
        </span>
        </el-dialog>

        <!-- 清单提示 -->
        <el-dialog
        title="清单事项介绍"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
        <span>{{ncontent}}</span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import {publishListOf,taskDelete,deptlist,uploadRemove,taskDetails,survey,appraise,logsList,projectAdd,projectstatus,itemNameList,projectmain,userdepe,apiassociat} from '@/utils/index.js'
export default {
    props:['ctype'],
    data(){
        var reason = (rule, value, callback) => {
            if (value === '') {
                this.$message.closeAll()
                this.$message.warning('请填写表单')
                callback(new Error(' '));
            } else {
                callback();
            }
        };
        return{
            noLook:false,
            noSubmit:true,
            dep:[],
            searchBtn:'',
            centerDialogVisible:false,
            search:'',
            tableData: [],
            currentPage1: 1,
            drawer:false,
            score:false,
            scoreVal:null,
            imageUrl:'',
            bohui:[],
            textScro:[ '不满意', '基本满意', '满意','极差', '失望'],
            // 详情
            ruleForm: {
                username:'',
                type: '',
                date: '',
                company: ''
            },
            rules:{},
            form:{
                radio:"3",
                reason:""
            },
            rule:{
                reason: [
                    { validator: reason, trigger: 'blur' }
                ],
            },
            optionsd:[],
            options:[],
            dialogVisible:false,
            dialogImageUrl:'',
            fileList: [],
            videoDate:[],
            // 任务id
            rowId:'',
            // 分页
            totals:0,
            details:[],
            lookId:'',
            logsd:[],
            ncontent:'',
            detailed:[],
            listsea:[],
            classd:[],
            file:[],
            team:[],
            searchd:{
                listsea:'',
                classd:'',
                deped:'',
                team:''
            },
            
        }
    },
    watch:{},
    created(){
        //所属区域
        deptlist().then((res)=>{
            console.log(res)
            this.dep = res.data
        })
        // 清单事项
        itemNameList().then((res)=>{
            this.listsea = res.data.data
        })
        // 事项类别
        projectmain().then((res)=>{
            console.log(res)
            this.classd = res.data
        })
        // 获取单位
        userdepe().then((res)=>{
            console.log(res)
            this.team = res.data
        })
    },
    methods:{
        // 上传图片
        handlePreview(file){
            this.file.push(file.data)
            this.imageUrl = file.data.src
            this.$message.closeAll()
            this.$message.success('上传成功')
        },
        // 移除图片
        handleRemove(file){
            uploadRemove({
                id:file.response.data.id
            }).then((res)=>{
                if(res.code == '0'){
                    // 移除file中数据
                    // 1.从pics数组中，找到图片对应的索引值
                    let j = this.file.findIndex((x)=>x.id == file.response.data.id)
                    // 2.调用splice方法，移除图片信息
                    this.file.splice(j, 1)
                    console.log(this.file)
                    // 删除预览图片
                    let uploadFiles = this.$refs.pictureUpload.uploadFiles
                    for (var i = 0; i < uploadFiles.length; i++) {
                        if (uploadFiles[i]['url'] == file.url) {
                            uploadFiles.splice(i, 1)
                        }
                    }
                    this.$message.closeAll()
                    this.$message.success(res.msg)
                }else{
                    this.$message.closeAll()
                    this.$message.warning(res.msg)
                }
            })
        },
        beforeUpload(file){
            console.log(file)
        },
        nowList(){
            this.searchd.listsea = ''
            apiassociat({
                class_id:this.searchd.classd
            }).then((res)=>{
                console.log(res)
                this.listsea = res.data
            })
        },
        // 市镇联动
        depedNow(val){
            console.log(val)
            if(val == '1'){
                userdepe({
                    type:'101'
                }).then((res)=>{
                    this.team = res.data
                })
            }else if(val == '2'){
                userdepe({
                    type:'201'
                }).then((res)=>{
                    this.team = res.data
                })
            }
        },
        // 打印
        printContent(){
            let subOutputRankPrint = document.getElementById('subOutputRank-print');
            console.log(subOutputRankPrint.innerHTML);
            let newContent =subOutputRankPrint.innerHTML;
            let oldContent = document.body.innerHTML;
            document.body.innerHTML = newContent;
            window.print();
            window.location.reload();
            document.body.innerHTML = oldContent;
            return false;
        },
        // 清单内容
        openDesc(id){
            console.log(id)
            this.ncontent = id.contents
            this.centerDialogVisible = true
        },
        drawerClose(){
            this.drawer = false
            this.fileList =[]
        },
        // 评分
        nowscore(){
            console.log(this.scoreVal)
        },
        scoreClick(){
            appraise({
                id:this.lookId,
                appraise:this.scoreVal
            }).then((res)=>{
                if(res.code == '0'){
                    this.$message.closeAll()
                    this.$message.success('评价完成')
                    setTimeout(()=>{
                        this.score = false
                        window.location.reload();
                    },800)
                }else{
                    this.$message.closeAll()
                    this.$message.warning(res.msg)
                }
            })
        },
        // 搜索
        onSearch(){
            publishListOf({
                form:this.search,
                genre:this.searchd.listsea,
                name:this.searchd.classd,
                departments:this.searchd.deped,
                cate_id:this.searchd.team
            }).then((res)=>{
                this.tableData = res.data.data
                console.log(res)
            })
        },
        // 添加任务
        new_task(){
            this.$router.push('/add_task')
        }, 
        // 查看
        handleClick(row) {
            console.log(row);
            this.lookId = row.id
            this.drawer = true
            this.details = []
            this.fileList =[]
            // 对话框
            logsList({
                p_id:row.id,
                type:'101',
            }).then((res)=>{
                console.log(res)
                this.logsd = res.data.data
            })
            projectstatus({
                id:row.id
            }).then((res)=>{
                res.data.forEach((item)=>{
                    this.detailed.push(item.explain)
                })
                console.log(this.detailed)
            })
            // this.dialogImageUrl = 'https://gifts-1027411-pic45.websiteonline.cn/upload/bb.jpg'
            logsList({
                p_id:row.id,
                type:'201',
            }).then((res)=>{
                console.log(res.data.data)
                this.bohui = res.data.data
            })
            taskDetails({
                id:row.id
            }).then((res)=>{
                console.log(res)
                this.details = res.data
                // this.fileList = res.data[0].pic
                let lists = res.data.pic
                lists.forEach((item) => {
                    this.fileList.push({url:item.src})
                })
                if(res.data.video.length > 0) {
                  this.videoDate = res.data.video[0].src
                }
                if(res.data.state == '2'){
                    this.noSubmit = false
                }else{
                    this.noSubmit = true
                }
            })
        },
        edit(row) {
            // console.log(row);
            this.rowId = row.id
            // localStorage.clear();
            // window.localStorage.setItem('rowid',row.id)
            this.$router.push({path:'/edit_task',query:{rowId:row.id}})
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 重新提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    projectAdd({
                        p_id:this.lookId,
                        p_content:this.form.reason,
                        pic:this.imageUrl,
                        type:'102'
                    }).then((res)=>{
                        // console.log(res)
                        if(res.code == '0'){
                            this.$message.closeAll()
                            this.$message.success('提交完成')
                            // 对话框
                            logsList({
                                p_id:this.lookId,
                                type:'101',
                            }).then((res)=>{
                                console.log(res)
                                this.logsd = res.data.data
                            })
                        }else{
                            this.$message.closeAll()
                            this.$message.warning(res.msg)
                        }
                    })
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
        // 任务完成
        complete(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    survey({
                        id:this.lookId,
                        state:'3',
                        content:this.form.reason
                    }).then((res)=>{
                        // console.log(res)
                        if(res.code == '0'){
                            this.$message.closeAll()
                            this.$message.success('协同此理任务完成，谢谢。')
                            this.$confirm('协同此理任务完成，谢谢。', '提示', {
                                confirmButtonText: '评价',
                                cancelButtonText: '取消',
                                type: 'success'
                            }).then(() => {
                                this.drawer = false
                                this.score = true
                            }).catch(() => {});
                            // setTimeout(()=>{
                            //     this.drawer = false
                            //     this.score = true
                            // },800)
                        }else{
                            this.$message.closeAll()
                            this.$message.warning(res.msg)
                        }
                    })
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
        // 删除
        deleted(val) {
            console.log(val)
            this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                taskDelete({
                    id:val.id
                }).then((res)=>{
                    if(res.code == '0'){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        publishListOf({
                            ctype:this.ctype
                        }).then((res)=>{
                            this.tableData = res.data.data
                        })
                    }else{
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        });
                    }
                })
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
             publishListOf({
                ctype:this.ctype,
                page:val
            }).then((res)=>{
                this.tableData = res.data.data
            })
        },
        // 上传视频
        handlePictureCardPreview(file){
            console.log(file)
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
}
</script>

<style lang="scss" scoped>
.task_btn{
    padding: 0 15px;
    
}
.task_btn button{
    background-color: #31bdce;
    color: white;
}
.search{
    float: right;
    font-size: 0;
    // border: 1px solid #ccc;
}
.search input{
    
    height: 36px;
    vertical-align: top;
    border: 0;
    outline: none;
    padding: 0 7px;
    font-size: 14px;
    border: 1px solid #ccc;
}
.search button{
    height: 36px;
    border: 0;
    padding: 0 20px;
}
.search button:hover{
    cursor: pointer;
}
.task_table::v-deep{
    margin-top: 30px;
    box-sizing: border-box;
    .el-table_1_column_1{
        .cell{
            text-align: center;
        }
    }
}

.el-pagination{
  font-weight: 500;
}
.drawer::v-deep{
    .el-drawer{
        width: 50% !important;
    }
}
.demo-ruleForm::v-deep{
    margin-top: 15px;
    background-color: white;
    padding: 40px 30px 20px 30px;
    border-bottom: 1px solid #ccc;
    .el-rate{
        vertical-align: middle;
        margin-top: 10px;
    }
    .el-form-item{
        display: inline-block;
        width: 500px;
        margin-bottom: 30px;
        vertical-align: middle;
    }
    .el-form-item__label{
        width: 130px !important;
    }
    .el-form-item__content{
        margin-left: 130px !important;
    }
    .uppic{
        display: block;
        width: 100%;
        .el-upload-list__item{
            div{
                height: 146px;
            }
        }
    }
    .el-select{
        width: 100%;
    }
    .el-upload{
        display: none;
    }
}
.wrap{
    width:70%;
    position:relative;
    // padding-bottom:62%;    /*需要用padding来维持16:9比例,也就是9除以16*/
    height: 400px;
    video{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%
    }
}
.demo-form::v-deep{
    width: 90%;
    padding-top: 20px;
    .el-textarea__inner{
        height: 100px;
    }
}
.searchclass::v-deep{
    width:100px;
    height:38px;
    margin:0 7px;
    .el-input{
        height: 38px;
    }
    .el-input__inner{
        height: 38px;
        line-height: 38px;
    }
}
.score::v-deep{
    // text-align: center;
    .el-rate__item:nth-child(5){
        display: none;
    }
    .el-rate__item:nth-child(4){
        display: none;
    }
}

.el-dialog__wrapper{
    right: 200px;
    left:100px;
    top: 100px;
}
.ncontent{
    width: 225px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ncontent:hover{
    cursor: pointer;
}
.messages{
    padding: 0 100px;
    h3{
        text-align: center;
    }
}
.mess_cn{
    margin-top: 20px;
    overflow: auto;
    .mess_left{
        float: left;
        width: 60px;
        text-align: center;
        vertical-align: middle;
        img{
            width: 40px;
            height: 40px;
            object-fit: cover;
        }
        p{
            font-size: 12px;
        }
    }
    .user_cn{
        font-size: 12px;
        float: left;
        border: 1px solid #478bf1;
        border-radius: 10px;
        padding: 10px 20px;
        vertical-align: middle;
        margin-right: 10px;
        box-shadow: 0px 0px 5px #ccc;
        margin-left: 20px;
        span:nth-child(1){
            font-size: 14px;
            padding-bottom: 10px;
        }
        span{
            display: block;
            font-size: 13px;
        }
    }
    .mess_right{
        float: right;
        .mess_left{
            float: right;
        }
        .user_cn{
            margin-right: 20px;
        }
    }
}
.message{
    padding:10px 20px;
    padding-bottom: 60px;
    h3{
        font-size: 16px;
        text-align: center;
        margin-bottom: 20px;
    }
}
.van-image{
    z-index: 9999;
}
.el-select-dropdown__item{
    width: 250px !important;
}
.edit_container::v-deep{
.ql-editor{
    height: 200px !important;
}
}
.edit_container::v-deep{
    .el-textarea{
        display: inline-block;
        width: 60%;
        vertical-align: top;
        height: 148px;
        .el-textarea__inner{
            height: 100%;
        }
    }
}
.avatar-uploader{
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
</style>